<layout name="Layout/layout"/>
<script type="text/javascript" src="/Public/plupload/plupload/plupload.full.min.js"></script>
<script type="text/javascript">
    $(function () {

        $('#upThis').click(function (event) {
            var info = $('#upConfig').serialize();
            $.ajax({
                type: "POST",
                url: "{:U('Main/upConfig')}",
                data: info,
                dataType: 'text',
                success: function (rsault) {
                    var data = eval('(' + rsault + ')');
                    if (data.status == '1') {
                        return dialog.success(data.message);
                    } else {
                        return dialog.error(data.message);
                    }
                }
            });
        });
    })
</script>
<div class="container-fulid">
    <div class="col-sm-2">
        <include file="Layout:slide"/>
    </div>
    <div class="col-sm-10 slid_right">
        <br/>
        <div class="whiteblock">
            <div class="page-header" style="margin: 30px;">
                <h3 class="text-primary">
                    系统设置
                    <small>
                        设置项
                    </small>
                </h3>
            </div>
            <div class="getfrom">
                <div class="col-md-3 text-center">
                    <br>
                    <div class="avatar_area text-center" id="avatar_uplpad_btn">
                        <div id="avatar_pic" style="padding: 10px;background-color: #CCC;">
                            <img src="{$data.logo}" width="200"/>
                        </div>
                        <div id="loading_bar" style="display:none">
                            <p id="updesc">
                                图片上传中...
                            </p>
                            <span class="loading_bar">
                                            <em id="percent" style="width: 27%;">
                                            </em>
                                        </span>
                            <span id="percentnum">
                                            27%
                                        </span>
                        </div>
                        <br/>
                        <br/>
                    </div>
                    <p>图片大小150*50 <br>宽度超过150或高度超过50被裁剪</p>
                </div>
                <div class="col-md-9">
                    <form id="upConfig">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>
                                        网站名称
                                    </label>
                                    <input type="text" class="form-control" name="site" value="{$data.site}"/>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>
                                        备案号：
                                    </label>
                                    <input type="text" class="form-control" name="code" value="{$data.code}"/>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>
                                        站长：
                                    </label>
                                    <input type="text" class="form-control" name="name" value="{$data.name}"/>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>
                                        邮箱：
                                    </label>
                                    <input type="email" class="form-control" name="mail" value="{$data.mail}"/>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>
                                        关键词：
                                    </label>
                                    <textarea class="form-control" name="keyword" rows="5">{$data.keyword|br2nl}</textarea>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>
                                        网站简介：
                                    </label>
                                    <textarea class="form-control" name="description" rows="5">{$data.description|br2nl}</textarea>
                                    </input>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                            <div class="col-md-6">
                                <label>App Key</label>
                                <input type="text" class="form-control" name="appkey" value="{$data.appkey}">
                            </div>
                            <div class="col-md-6">
                                <label>App Secret</label>
                                <input type="text" class="form-control" name="appsecret" value="{$data.appsecret}">
                            </div>
                            <div class="clearfix"></div>
                            <br>
                            <div class="col-md-6 col-md-offset-6">
                                <button type="button" class="btn btn-primary btn-block" id="upThis">
                                    提交修改
                                </button>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                    </form>
                </div>
                <div class="clearfix">
                </div>
            </div>
        </div>
        <br/>
    </div>
    <div class="clearfix">
    </div>
</div>

<script type="text/javascript">
    $(function () {
        var uploader_avatar = new plupload.Uploader({
            runtimes: 'gears,html5,html4,silverlight,flash',
            browse_button: ['avatar_uplpad_btn'],
            url: "{:U('Other/upload')}",

            flash_swf_url: 'js/plugins/plupload/Moxie.swf',
            silverlight_xap_url: 'js/plugins/plupload/Moxie.xap',

            filters: {
                max_file_size: '3mb',
                mime_types: [
                    {title: "files", extensions: "jpg,png,gif,jpeg"}
                ]
            },
            resize: {
                width: 150,
                height: 50,
                crop: true,
                quality: 90,
                preserve_headers: false
            },
            multi_selection: false, //true:ctrl多文件上传, false 单文件上传
            init: {

                FilesAdded: function (up, files) { //文件上传前
                    $("#avatar_pic").hide();
                    $("#loading_bar").show();
                    uploader_avatar.start();
                },
                UploadProgress: function (up, file) { //上传中，显示进度条
                    var percent = file.percent;
                    $("#percent").css({"width": percent + "%"});
                    $("#percentnum").text(percent + "%");
                },
                FileUploaded: function (up, file, info) { //文件上传成功的时候触发
                    var data = eval("(" + info.response + ")");//解析返回的json数据
                    $("#avatar_pic").html("<img  src='" + data + "' width='200'/>");
                    $("#loading_bar").hide();
                    $("#avatar_pic").show();

                },
                Error: function (up, err) { //上传出错的时候触发
                    var error = eval("(" + err.message + ")");
                    alert(error);
                    $("#loading_bar").hide();
                }
            }
        });
        uploader_avatar.init();
    })
</script>